<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Dynamically Add Nodes and Edges</title>
  </head>
  
  <body>
    <select id="selector">
      <option value="default">默认</option>
      <option value="addNode">添加节点</option>
      <option value="addEdge">添加边</option></select>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>// 封装点击添加边的交互
      G6.registerBehavior('click-add-edge', {
        getEvents() {
          return {
            'node:click': 'onClick',
            mousemove: 'onMousemove',
            'edge:click': 'onEdgeClick' // 点击空白处，取消边
          };
        },
        onClick(ev) {
          const node = ev.item;
          const graph = this.graph;
          const point = {
            x: ev.x,
            y: ev.y
          };
          const model = node.getModel();
          if (this.addingEdge && this.edge) {
            graph.updateItem(this.edge, {
              target: model.id
            });
            // graph.setItemState(this.edge, 'selected', true);
            this.edge = null;
            this.addingEdge = false;
          } else {
            this.edge = graph.addItem('edge', {
              source: model.id,
              target: point
            });
            this.addingEdge = true;
          }
        },
        onMousemove(ev) {
          const point = {
            x: ev.x,
            y: ev.y
          };
          if (this.addingEdge && this.edge) {
            this.graph.updateItem(this.edge, {
              target: point
            });
          }
        },
        onEdgeClick(ev) {
          const currentEdge = ev.item;
          // 拖拽过程中，点击会点击到新增的边上
          if (this.addingEdge && this.edge == currentEdge) {
            graph.removeItem(this.edge);
            this.edge = null;
            this.addingEdge = false;
          }
        }
      });

      // 封装点击添加边的交互
      G6.registerBehavior('click-add-node', {
        getEvents() {
          return {
            'canvas:click': 'onClick'
          };
        },
        onClick(ev) {
          const graph = this.graph;
          const node = graph.addItem('node', {
            x: ev.x,
            y: ev.y,
            id: G6.Util.uniqueId()
          });
          // graph.setItemState(node, 'selected', true);// 添加后默认选中
        }
      });

      const data = {
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200
        },
        {
          id: 'node2',
          x: 300,
          y: 200
        },
        {
          id: 'node3',
          x: 300,
          y: 300
        }],
        edges: [{
          id: 'edge1',
          target: 'node2',
          source: 'node1'
        }]
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
        modes: {
          default: ['drag-node', 'click-select'],
          addNode: ['click-add-node', 'click-select'],
          addEdge: ['click-add-edge', 'click-select']
        }
      });

      graph.data(data);
      graph.render();
      graph.on('graphstatechange', e => {
        console.log(e);
      });

      document.getElementById('selector').addEventListener('change', e => {
        const value = e.target.value;
        graph.setMode(value);
      });
    </script>
  </body>

</html>